<div class="component procurement-component">
    <div class="base-info panel panel-info">
        <div class="panel-heading">
            <div class="panel-title">Base Info</div>
            <div class="panel-title code">Base Info</div>
        </div>
        <div class="panel-body">
            <div class="name-element edit-panel-element">
                <div class="name-label edit-element-label required">name:</div>
                <div class="input-div">
                    <input name="name" class="name-value edit-element-value form-control" maxlength="80" />
                </div>
            </div>
            <div class="description-element edit-panel-element">
                <div class="description-label edit-element-label">description:</div>
                <div class="input-div">
                    <textarea name="description"
                        class="description-value edit-textarea-element-value form-control"></textarea>
                </div>
            </div>
            <button type="button" class="save-button btn btn-primary">
                Save
            </button>
        </div>
    </div>
    <div class="item-div panel panel-info">
        <div class="panel-heading">
            <div class="panel-title">Product Items</div>
        </div>
        <div class="panel-body">
            <div class="item-list-button-wrap">
                <div class="item-add-button add-product-button" title="Add Product"></div>
            </div>
            <div class="add-item-panel add-product-item-panel panel-body">
                <ul class="nav nav-tabs">
                    <li class="add-item-tab add-config-item-tab active">
                        <a href="#" data-toggle="tab">Add Product</a>
                    </li>
                </ul>
                <div class="tab-content">
                    <div class="add-new-product-item tab-pane fade in active">
                        <div class="add-new-item-panel add-new-config-item-panel panel panel-primary">
                            <div class="code-element">
                            </div>
                            <div class="name-element edit-panel-element">
                                <div class="name-label edit-element-label required">name:</div>
                                <div class="input-div">
                                    <div class="dropdown">
                                        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
                                            <span class="selected-item">product</span>
                                            <span class="caret"></span>
                                        </button>
                                        <ul class="dropdown-menu product-list" role="menu" aria-labelledby="dLabel">
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="count-element edit-panel-element">
                                <div class="count-label edit-element-label required">count:</div>
                                <div class="count-div">
                                    <input name="count" class="count-value edit-element-value form-control"
                                        maxlength="80" />
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="button-wrap">
                    <button type="button" class="ok-button btn btn-success">
                        OK
                    </button>
                    <button type="button" class="reset-button btn btn-info">
                        Reset
                    </button>
                    <button type="button" class="close-button btn btn-primary">
                        Close
                    </button>
                </div>
            </div>
            <div class="item-list">
            </div>
        </div>
    </div>
    <div class="handle-div panel panel-info">
        <div class="panel-heading">
            <div class="panel-title">Handle</div>
        </div>
        <div class="panel-body">
            <div class="submit-div">
                <div class="element-wrap reviewer-wrap">
                    <div class="reviewer-element edit-panel-element">
                        <div class="reviewer-label edit-element-label required">reviewer:</div>
                        <div class="input-div reviewer-input">
                            <div class="dropdown">
                                <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
                                    <span class="selected-item">reviewer</span>
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu reviewer-list" role="menu" aria-labelledby="dLabel">
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="button-wrap">
                    <button type="button" class="submit-button btn btn-success">
                        Submit
                    </button>
                    <button type="button" class="withdraw-button btn btn-danger">
                        Withdraw
                    </button>
                </div>
            </div>
            <div class="review-div">
                <div class="element-wrap">
                    <div class="approver-element edit-panel-element">
                        <div class="approver-label edit-element-label required">approver:</div>
                        <div class="input-div approver-input">
                            <div class="dropdown">
                                <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
                                    <span class="selected-item">approver</span>
                                    <span class="caret"></span>
                                </button>
                                <ul class="dropdown-menu approver-list" role="menu" aria-labelledby="dLabel">
                                </ul>
                            </div>
                        </div>
                    </div>
                    <div class="comment-element edit-panel-element">
                        <div class="approver-label edit-element-label required">comment:</div>
                        <div class="comment-div">
                            <textarea name="comment"
                                class="comment-value edit-textarea-element-value form-control"></textarea>
                        </div>
                    </div>
                </div>
                <div class="button-wrap">
                    <button type="button" class="accept-button btn btn-success">
                        Accept
                    </button>
                    <button type="button" class="reject-button btn btn-danger">
                        Reject
                    </button>
                    <button type="button" class="reset-button btn btn-info">
                        Reset
                    </button>
                </div>
            </div>
            <div class="approve-div">
                <div class="element-wrap">
                    <div class="comment-element edit-panel-element">
                        <div class="approver-label edit-element-label required">comment:</div>
                        <div class="comment-div">
                            <textarea name="comment"
                                class="comment-value edit-textarea-element-value form-control"></textarea>
                        </div>
                    </div>
                </div>
                <div class="button-wrap">
                    <button type="button" class="accept-button btn btn-success">
                        Accept
                    </button>
                    <button type="button" class="reject-button btn btn-danger">
                        Reject
                    </button>
                    <button type="button" class="reset-button btn btn-info">
                        Reset
                    </button>
                </div>
            </div>
        </div>
    </div>
    <div class="process-records-div panel panel-info">
        <div class="panel-heading">
            <div class="panel-title">Process Records</div>
        </div>
        <div class="panel-body">
        </div>
    </div>
    <div class="templates">
        <div class="item-panel procurement-item-panel">
            <div class="self">
                <div class="code element-div"></div>
                <div class="name element-div"></div>
                <div class="count element-div"></div>
                <div class="operation-button-wrap">
                    <div class="modify-button" title="Edit Procurement Item"></div>
                    <div class="delete-button" title="Delete Procurement Item"></div>
                </div>
            </div>
        </div>
        <div class="edit-item-panel panel panel-primary form-horizontal">
            <div class="subject">Update Procurement Item</div>
            <div class="name-element edit-panel-element">
                <div class="code-element"></div>
                <div class="name-label edit-element-label required">name:</div>
                <div class="input-div">
                    <div class="dropdown">
                        <button type="button" class="btn dropdown-toggle" data-toggle="dropdown">
                            <span class="selected-item">product</span>
                            <span class="caret"></span>
                        </button>
                        <ul class="dropdown-menu product-list" role="menu" aria-labelledby="dLabel">
                        </ul>
                    </div>
                </div>
            </div>
            <div class="count-element edit-panel-element">
                <div class="count-label edit-element-label required">count:</div>
                <div class="count-div">
                    <input name="count" class="count-value edit-element-value form-control" maxlength="80" />
                </div>
            </div>
            <div class="button-wrap">
                <button type="button" class="save-button btn btn-success">
                    Save
                </button>
                <button type="button" class="cancel-button btn btn-primary">
                    Cancel
                </button>
            </div>
        </div>
    </div>
</div>
<link type="text/css" rel="stylesheet"
    href="/static/clientlibs/tattoo/workflow/component/procurement-component/css/procurement-component.css" />
<script type="text/javascript"
    src="/static/clientlibs/tattoo/workflow/component/procurement-component/js/procurement-component.js"></script>